<template>
  <div
    class="right-panel"
    :style="{ width: rightWidth + 'px', height: rightHeight }"
  >
    <div class="page-list" v-if="rightShow">
      <div class="page-list-container" style="height: 239.972px;">
        <div
          v-for="(item, index) in 3"
          :key="index"
          class="page-list__item active"
          style="background-image: url(https://prod-storage-rainbow-rainbow-oss-cdn.ckt.cn/image_single_page_convert_result/2020/09/18/23b50252-5f2e-4568-ade2-d9aac72c8a1c?Expires=1600655733&OSSAccessKeyId=LTAIIwFk1MGs2BL3&Signature=7CEv5aYmABf3%2Be3Wo7hKqHA3SYk%3D&x-oss-process=image%2Fresize%2Cw_800);
                  height: 237.972px;"
        >
          <span class="item__value">{{ index + 1 }}</span>
        </div>
        <div class="page-list-isFull">页数已达上限</div>
      </div>
    </div>

    <div v-if="!rightShow" style="width:56px">
      <div class="page-list-small">
        <div class="page-list-container" style="height: 120px;">
          <div class="page-list-small__item active">
            <span class="item__value">1</span>
          </div>
          <div class="page-list-add-container"></div>
        </div>
      </div>
    </div>
    <div @click="shousuo()" class="right-panel-toggle">
      <i
        style="font-weight:800"
        :class="rightShow ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
      ></i>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "rightPanel",
  data() {
    return {
      rightWidth: 56,
      rightHeight: "",
      rightShow: false
    };
  },
  computed: {},
  created() {},
  mounted() {
    window.addEventListener("resize", () => {
      this.resizeHeight();
    });
    this.resizeHeight();
    if (this.rightShow == false) this.rightWidth = 56;
    else this.rightWidth = 208;
  },
  methods: {
    ...mapActions(["setRightState"]),
    shousuo() {
      this.rightShow = !this.rightShow;
      if (this.rightShow == false) this.rightWidth = 56;
      else this.rightWidth = 208;
      this.setRightState(this.rightShow);
      this.$emit("shousuo", this.rightShow);
    },
    resizeHeight() {
      const that = this;

      this.$nextTick(() => {
        that.rightHeight = window.innerHeight - 56 + "px";

        that.$forceUpdate();
      });
    },
    tabHandleClick() {
      console.log("tabHandleClick");
    }
  }
};
</script>

<style lang="less" scoped>
@import "../styles/rightPanel/index.less";

.right-panel-toggle {
  line-height: 80px;
  text-align: center;
}
</style>
